<template>
  <div style="padding:10px;">
    <div style="position: fixed; top:60px; width:100%;padding-right: 20px;z-index:99;">
      <el-radio-group size="small" v-model="projectsQuery.queryCompleted" @change="query()">
        <el-radio-button :label="1" >未完成</el-radio-button>
        <el-radio-button :label="2" >已完成</el-radio-button>
        <el-radio-button :label="-1" >已取消</el-radio-button>
      </el-radio-group>
      <el-button v-if="isManager" style="float:right" size="small" type="success" icon="el-icon-plus" @click="addProject">添加</el-button>
    </div>
    <ex-infinite-scroll ref="ins" class="wpb-projects" :url="url" :size="15">
      <template slot="content" slot-scope="{list}">
        <el-card v-for="item in list">
            <div style="float:left" @click="editProject(item)">
              <div style="padding-bottom: 6px;">
                <i :class="'iconfont '+ item.icon" :style="'color:'+item.color"></i>
                项目：{{ item.name }}
              </div>
              <div style="font-size: 12px">时间：{{ item.planStartTime }} 至 {{ item.planEndTime }}</div>
            </div>
            <div class="right_btn" v-if="item.flag==1 && isManager">
              <el-button type="text" @click="showCompleteConfirm(item)">完成</el-button>
            </div>
        </el-card>
      </template>
    </ex-infinite-scroll>
    <el-dialog
      title="确定对该项目进行完成操作吗?"
      :visible.sync="dialogVisible"
      width="95%">
      <div>
          <div style="line-height: 14px; font-weight: bold; padding-bottom: 20px">
            <i :class="'iconfont '+ currentProject.icon" :style="'color:'+currentProject.color"></i>
            {{currentProject.name}} <br>
          </div>
          <div style="position: relative">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入项目总结"
              v-model="currentProject.completeMsg">
            </el-input>
          </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="complete(currentProject)">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import 'element-ui/lib/theme-chalk/index.css';
  import ExInfiniteScroll from '@/components/common/ex-infinite-scroll'
  import dingMixin from  '@/mixins/ding'

  export default {
    data () {
      return {
        projectsQuery:{
          queryDepartmentId: '',
          queryDepartmentName:'',
          queryCompleted:1
        },
        url: '/wpb/projectbase/list',
        currentProject: {},
        dialogVisible: false
      }
    },
    mixins: [dingMixin],
    components:{
      ExInfiniteScroll
    },
    activated () {
      this.query()
    },
    created(){

    },
    methods: {
      showCompleteConfirm(project){
        this.dialogVisible=true
        this.currentProject = project
      },
      complete(item){
         this.$http({
           url: this.$http.adornUrl('/wpb/projectbase/complete'),
           method: 'get',
           params: this.$http.adornParams({
             'projectId': item.id,
             'completeMsg': item.completeMsg
           })
         }).then(({data}) => {
             if (data && data.code === 0) {
               item.endTime = new Date().toDateString();
               this.dialogVisible = false
               this.query()
             }
           }
         ).catch(error=>{
           console.info(error)
         })
      },
      chooseDepartment(){
        let that = this;
        this.departmentsPicker().then(function(dept){
          if(dept.length>0){
            that.projectsQuery.queryDepartmentId= dept[0].id;
            that.projectsQuery.queryDepartmentName = dept[0].name;
          }
        })
      },
      addProject(){
        this.$router.push('wpb-add');
      },
      editProject(project){
        this.$router.push({name: 'wpb-add', query: { projectId: project.id} });
      },
      query(){
        let params = {
          'flag': this.projectsQuery.queryCompleted
        }
        this.$refs.ins.getData(params)
      },
      // 新增 / 修改
      updateHandle (id) {
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 删除
      deleteHandle (id) {
        let ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/wpb/projectbase/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      }
    }
  }
</script>
<style>

  .el-message-box {
    width: 320px;
  }

  .selector{
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    float:right;
    font-size: inherit;
    height: 30px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 120px;
    cursor: pointer;
  }

  .wpb-projects{
    width:100%;
    height: calc(100vh - 150px);
    overflow-y: auto;
    margin-top: 35px;
  }

  .wpb-projects .el-card {
    position: relative;
    height: 80px;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor:pointer;
  }
  .wpb-projects span{
    width:50%;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
    overflow: hidden;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    padding-left: 10px;
    padding-right: 10px;
    border-bottom: 1px solid #ebeef5;
  }

  .right_btn{
    position: absolute;
    right: 0px;
    bottom: 1px;
  }

  .center{
    text-align: center;
  }
</style>
